<template>
  <div class="hm-mine">
    <div class="header">
      <van-image round width="4rem" height="4rem" :src="user.avatar" />
      <div class="name">{{ user.username }}</div>
    </div>

    <van-grid clickable :column-num="3">
      <van-grid-item icon="home-o" text="历史记录" to="#" />
      <van-grid-item icon="search" text="我的收藏" @click="$router.push('/collection')" />
      <van-grid-item icon="search" text="我的点赞" @click="$router.push('/like')" />
    </van-grid>

    <div class="cell">
      <van-cell title="推荐分享" is-link @click="showShare = true" />
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
      <van-cell title="意见反馈" is-link />
      <van-cell title="关于我们" is-link />
      <van-cell title="退出登录" is-link @click="onLogout" />
    </div>
  </div>
</template>
<script>
import { getUserInfoApi } from '@/apis/user'
import { Toast } from 'vant'
import { Dialog } from 'vant'
export default {
  components: {},
  props: {},
  data() {
    return {
      user: {},
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUserInfo()
  },
  mounted() {},
  methods: {
    async getUserInfo() {
      const res = await getUserInfoApi()
      this.user = res.data.data
    },
    onLogout() {
      Dialog.confirm({
        title: '确认退出？',
        message: '真的要走了吗？'
      })
        .then(() => {
          localStorage.removeItem('token')
          this.$router.push('/login')
          Toast.success('退出成功')
        })
        .catch(() => {
          Toast.fail('取消退出')
        })
    },
    onSelect(option) {
      Toast(option.name + '分享功能开发中...')
      this.showShare = false
    }
  }
}
</script>
<style lang="less" scoped>
.hm-mine {
  height: 1000px;
  padding: 0 10px;
  background-color: #f5f5f5;
  overflow: hidden;

  .header {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .name {
      margin-left: 20px;
      font-size: 18px;
      font-weight: bold;
    }
  }

  .cell {
    margin-top: 20px;
  }
}
</style>
